<!-- 登录部分的页面内容 -->
<template>
  <div>
    <v-snackbar
      v-model="promptMessage"
      top
      :timeout="3000"
      style="position:fixed;top:20px;"
    >
      {{ snackbarInfo }}
      <v-chip dark @click="promptMessage = false" label>关闭</v-chip>
    </v-snackbar>

    <v-layout wrap row px-3 pt-5>
      <v-flex xs12>
        <v-text-field
          color="#71af65"
          label="手机号"
          v-model="phone"
          placeholder="请输入手机号"
        ></v-text-field>

        <!-- <v-text-field label="请输入手机号" v-model="phone"></v-text-field> -->
      </v-flex>
      <v-flex xs12>
        <v-text-field
          color="#71af65"
          label="密码"
          v-model="password"
          placeholder="请输入登录密码"
        ></v-text-field>

        <!-- <v-text-field label="请输入登录密码" type="password" v-model="password"></v-text-field> -->
      </v-flex>

      <v-flex xs12>
        <v-layout align-center justify-space-between row fill-height px-3>
          <div class="mt-3">
            <v-checkbox
              height="12px"
              color="#333333"
              v-model="remenberPassword"
              label="记住密码"
            ></v-checkbox>
          </div>
          <div>
            <v-btn dark color="#71af65" to="./ForgetPassword">忘记密码?</v-btn>
          </div>
        </v-layout>
      </v-flex>

      <v-flex xs12>
        <v-btn block color="#71af65" dark @click="loginGPRS()">登录</v-btn>
      </v-flex>

      <v-flex xs12 mt-4>
        第三方登录
        <v-btn fab small color="#ffffff" @click="wxLogin()">
          <span
            style="color: #71af65; font-size:25px"
            class="iconfont icon-wchart"
          ></span>
        </v-btn>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import qs from 'qs';
export default {
  components: {},
  data() {
    return {
      phone: '',
      password: '',
      remenberPassword: false,
      promptMessage: false,
      snackbarInfo: '',
    };
  },

  created() {},

  mounted() {},

  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},

  computed: {},

  watch: {},

  methods: {
    // 点击登录按钮
    loginGPRS() {
      let _this = this;
      let noRegisteredWxAvatarUrl =
        'notDefinedYetItsJustPreAllocatedStringTooMuchTooWasteful';
      let defaultWxAvatarUrl =
        '';

      if (
        this.phone.trim !== '' &&
        /^1[3|4|5|7|8|9][0-9]{9}$/.test(this.phone)
      ) {
        this.$axios
          .post(
            `https://yigrow.cn/api/v2/auth_related/login`,
            qs.stringify({
              mobile: this.phone, //用户输入电话号码
              password: this.password, //用户密码
              agent: window.navigator.userAgent, //....
            }),
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
              },
            }
          )
          .then(function(message) {
            // _this.log(message);
            console.log('------->message: ', message);
            if (message.data.status === 1) {
              // _this.mqttClientConnection(); //mqtt连接初始化

              _this.$router.push({ path: '/RealTimeDataReporting' });

              // let userWxInfo = message.data.data;
              // let token = userWxInfo.token; //用户token
              // let UserAllInfo = JSON.stringify({
              //   mobile: userWxInfo.mobile,
              //   wxAvatarUrl:
              //     userWxInfo.wxAvatarUrl === noRegisteredWxAvatarUrl
              //       ? defaultWxAvatarUrl
              //       : userWxInfo.wxAvatarUrl,
              //   wxNickName:
              //     userWxInfo.wxNickName === noRegisteredWxAvatarUrl
              //       ? '暂未设置'
              //       : userWxInfo.wxNickName,
              // });
              // _this.$store.commit('WXAVATARURL', UserAllInfo); //登录获取用户微信信息(电话号码&&头像&&名称)
              /**
               * 如果用户绑定的服务器数量大于0,store存储用户绑定所有服务器信息;
               */
              // if (userWxInfo.servers.length > 0) {
              //   let userBuildingInfo = userWxInfo.servers;
              //   let stringifyUserInfo = JSON.stringify(userBuildingInfo);
              //   _this.$store.dispatch('UserLogin_MESSAGE', stringifyUserInfo);
              //   //如果记住密码,默认将用户信息本地存储7天密码
              //   if (_this.remenberPassword) {
              //     let time = +new Date() + 3600 * 1000 * 24 * 7; //当前时间到7天后的时间
              //     let Userinfo = {
              //       remenberPsd: time,
              //       token: token,
              //       level: userBuildingInfo,
              //     };
              //     window.localStorage.setItem(
              //       'UserInfo',
              //       JSON.stringify(Userinfo)
              //     ); //本地存储用户信息
              //   } else {
              //     console.log('未记住密码');
              //   }
              //   _this.$store.dispatch('UserLogin_TOKEN', token); //单独存储用户登录token
              //   _this.$store.dispatch('UserLogin_PERSONNER', stringifyUserInfo); //默认选择第一个服务器的mqttBaseTopic链接
              //   window.sessionStorage.setItem('isLogin', true); //将用户登录状态置为true(已登录)
              //   _this.$store.commit('showsnackbar', '易种OS欢迎您');
              //   setTimeout(() => {
              //     _this.$router.push('/home');
              //   }, 1000);
              // } else {
              //   //和有服务器列表相同操作
              //   if (_this.remenberPassword) {
              //     let time = +new Date() + 3600 * 1000 * 24 * 7;
              //     let Userinfo = {
              //       remenberPsd: time,
              //       token: token,
              //       level: null, //服务器列表为null
              //     };
              //     window.localStorage.setItem(
              //       'UserInfo',
              //       JSON.stringify(Userinfo)
              //     ); //存储用户信息
              //   } else {
              //     console.log('未记住密码');
              //   }
              //   window.sessionStorage.setItem('isLogin', true); //置登录状态为true
              //   _this.$store.dispatch('UserLogin_TOKEN', token); //单独存储token
              //   _this.$store.commit('showsnackbar', '易种OS欢迎您');
              //   setTimeout(() => {
              //     _this.$router.push('/home');
              //   }, 1000);
              // }
            } else {
              if (
                message.data.status === -1 &&
                message.data.msg === '用户不存在！'
              ) {
                _this.promptMessage = true;
                _this.snackbarInfo = '您还为注册，请先注册';
              } else {
                _this.promptMessage = true;
                _this.snackbarInfo = '填写信息有误,请检查后重试!';
              }
            }
          });
      } else {
        this.promptMessage = true;
        this.snackbarInfo = '手机号码为必填项，请输入正确的手机号码!';
        // this.errorState = true;
        // this.errorMessage = '* 手机号码为必填项，请输入正确的手机号码';
        return;
      }
    },

    // 第三方登录
    wxLogin() {
      window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx4f3284e34babf2d3&redirect_uri=https%3A%2F%2Fyigrow.cn%2Fwechat%2Fproxy%2Fyigrowweb&response_type=code&scope=snsapi_login&state=${localStorage
        .getItem('uuid')
        .replace(/-/gi, '_')}#wechat_redirect`;
    },

    mqttClientConnection() {
      return new Promise((resolve, reject) => {
        if (!this.$store.state.mqttClient) {
          let connectData = {
            con: 'SAVE_MQTT_CLIENT',
            msg: 'MQTT_MSG_HANDLER',
          };
          let connectDebugData = {
            con: 'SAVE_DEBUG_MQTT_CLIENT',
            msg: 'MQTT_DEBUGMSG_HANDLER',
          };
          this.$store.dispatch('connectMqttClient', connectData);
          this.$store.dispatch('connectMqttClient', connectDebugData);
          resolve();
        } else {
          //console.log('客户端已连接')
        }
      });
    },
  },
};
</script>
<style></style>
